function getCookie(name) {
    var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
    return r ? r[1] : undefined;
}

function generateUUID() {
    var d = new Date().getTime();
    if (window.performance && typeof window.performance.now === "function") {
        d += performance.now(); //use high-precision timer if available
    }
    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = (d + Math.random() * 16) % 16 | 0;
        d = Math.floor(d / 16);
        return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
    return uuid;
}
var preImageCodeId = "";
// 生成一个图片验证码的编号，并设置页面中图片验证码img标签的src属性
function generateImageCode() {
    // 1. 生成一个编号
    // 严格一点的使用uuid保证编号唯一,不是很严谨的情况下,也可以使用时间戳
    imageCodeId = generateUUID();
    // 2. 拼接验证码地址
    var imageCodeUrl = "/api/v1.0/imagecode?cur=" + imageCodeId + "&pre=" + preImageCodeId;
    // 3. 设置页面中图片验证码img标签的src属性
    $(".image-code>img").attr("src", imageCodeUrl);
    // 4. 将当前生成的编码进行保存，用于下一次请求传入
    preImageCodeId = imageCodeId


}

function sendSMSCode() {
    // 校验参数，保证输入框有数据填写
    $(".phonecode-a").removeAttr("onclick");
    var mobile = $("#mobile").val();
    if (!mobile) {
        $("#mobile-err span").html("请填写正确的手机号！");
        $("#mobile-err").show();
        $(".phonecode-a").attr("onclick", "sendSMSCode();");
        return;
    }
    var imageCode = $("#imagecode").val();
    if (!imageCode) {
        $("#image-code-err span").html("请填写验证码！");
        $("#image-code-err").show();
        $(".phonecode-a").attr("onclick", "sendSMSCode();");
        return;
    }

    // TODO: 通过ajax方式向后端接口发送请求，让后端发送短信验证码
    var datas = {
        "mobile": mobile,
        "image_code": imageCode,
        "image_code_id": imageCodeId
    };
    $.ajax({
        "url": "api/v1.0/smscode",
        "type": "post",
        "data": JSON.stringify(datas),
        "contentType": "application/json",
        "dataType": "json",
        "headers": {
            "X-CSRFToken": getCookie("csrf_token")
        },
        "success":function (resp) {
            if (resp.errno == "0"){
                // 倒计时60秒，60秒后允许用户再次点击发送短信验证码的按钮
                var num = 60;
                // 设置一个计时器
                var t = setInterval(function () {
                    if (num <= 0){
                        // 如果计时器到最后,清除计时器对象
                        clearInterval(t);
                        // 将点击获取验证码的按钮展示的文本回复原始文本
                        $(".phonecode-a").html("获取验证码");
                        // 将点击按钮的onclick事件函数恢复回去
                        $(".phonecode-a").attr("onclick", "sendSMSCode();")
                    }else {
                        num -= 1;
                        // 展示倒计时信息
                        $(".phonecode-a").html(num+"秒");
                    }
                }, 1000)
            } else{
                // 表示后端出现了错误,可以将错误信息展示到前段页面中
                $("#phone-code-err span").html(resp.errmsg);
                $("#phone-code-err").show();
                // 将点击按钮的onclick事件函数恢复回去
                $(".phonecode-a").attr("onclick", "sendSMSCode();");
            }
        }

    })
}

$(document).ready(function () {
    generateImageCode();  // 生成一个图片验证码的编号，并设置页面中图片验证码img标签的src属性
    $("#mobile").focus(function () {
        $("#mobile-err").hide();
    });
    $("#imagecode").focus(function () {
        $("#image-code-err").hide();
    });
    $("#phonecode").focus(function () {
        $("#phone-code-err").hide();
    });
    $("#password").focus(function () {
        $("#password-err").hide();
        $("#password2-err").hide();
    });
    $("#password2").focus(function () {
        $("#password2-err").hide();
    });

    // TODO: 注册的提交(判断参数是否为空)
    $(".form-register").submit(function (e) {
        // 阻止表单默认提交行为
        e.preventDefault();
        // 自己写代码进行提交
        var mobile = $("#mobile").val();
        var phoneCode = $("#phonecode").val();
        var password = $("#password").val();
        var password2 = $("#password2").val();
        if (!mobile) {
            $("#mobile-err span").html("请填写正确的手机号！");
            $("#mobile-err").show();
            return;
        }
        if (!phoneCode) {
            $("#phone-code-err span").html("请填写短信验证码！");
            $("#phone-code-err").show();
            return;
        }
        if (!password) {
            $("#password-err span").html("请填写密码!");
            $("#password-err").show();
            return;
        }
        if (password != password2) {
            $("#password2-err span").html("两次密码不一致!");
            $("#password2-err").show();
            return;
        }
        // 请求后端注册api, 进行用户注册
        var params = {
            "mobile": mobile,
            "sms_code": phoneCode,
            "password": password
        };
        $.ajax({
            "url": "api/v1.0/users",
            "type": "post",
            "contentType": "application/json",
            "data": JSON.stringify(params),
            "dataType": "json",
            "headers": {
                "X-CSRFToken": getCookie("csrf_token")
            },
            "success": function (resp) {
                if (resp.errno == "0"){
                    // 注册成功, 跳转到首页
                    location.href = "index.html";
                }else{
                    // 注册失败
                    $("#password2-err span").html(resp.errmsg);
                    $("#password2-err").show();
                }
            }

        })
    })

});
